
<template>
    <div class="image-select box float-window"   v-bind:class="customClass" v-bind:style="cssStyle()" >
        <div class="hd">
            {{config.title}}
            <div class="btns">
                <i class="fa fa-times pull-right fa-2x close" title="关闭" v-on:click="close()"></i>
            </div>
        </div>
        <div class="bd sx-scroll">
            <div class="left" v-bind:style="itemsHeight()">
                <div class="mode">
                    <div class="input-group" style="position: relative;">
                        <input type="text" class="input-sm form-control" enter-submit="42" v-model="keyWord" placeholder="图片名">
                          <span class="input-group-btn">
                            <button class="btn-info btn" type="button" v-on:click="KeyWordSet(keyWord)">搜索</button>
                          </span>
                    </div>
                </div>
                <div class="cats">
                    <!--<div class="cat" v-for="cat in cats.data">
                        <span v-on:click="fnCatSet(cat)">{{cat.name}}</span>
                        <div class="subcat" v-for="subcat in cat.sub_cats">
                            <span v-on:click="fnCatSet(subcat)"> - {{subcat.name}}</span>
                        </div>
                    </div>-->
                    <nav-tree :value="params.catIds"
                              :model="cats"
                              class-name=""
                              children="sub_cats"
                              label-name="name"
                              :value-name="'picture_category_id'"
                              is-expanded="true"
                              @selectID="select_id"
                    ></nav-tree>
                </div>
            </div>
            <div class="allitems">
                <div class="items" v-bind:style="itemsHeight()">
                    <div v-if="items.loading">
                        <i class="fa fa-spin fa-spinner"></i> 加载中...
                    </div>
                    <div v-if="items.total == 0"><span>暂无数据...</span></div>
                    <div class="item" v-for="item in items.list">
                        <a v-bind:href="item.picture_path" target="_blank" v-bind:title="item.title"><img v-bind:src="item.picture_path + '_150x150.jpg'"/></a>
                        <div>{{item.title}}</div>
                        <div>{{item.pixel}}</div>
                        <div><span class="btn-info btn" v-on:click="addPicture(item)">添加</span></div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="footer">
                        <pagination :total-items="items.total"
                                    :curr-page="params.pageNo"
                                    :size-page="params.pageSize"
                                    prev-show="2"
                                    next-show="2">

                        </pagination>
                    </div>
                </div>

            </div>

        </div>
        <div class="ft">
            <button class="btn btn-info" v-on:click="close()">关闭</button>
        </div>
    </div>
</template>


<script>
    import fn from 'admin/js/common/function.js';
    import navTree from 'admin/js/common/nav-tree.vue';
    import pagination from 'admin/js/common/pagination.vue';

    export default {
        data: function(){
            return {
                config: {
                    title: '请稍等...',
                    content: '',
                    style: {
                        left: 100,
                        top: 30,
                        width: 150,
                        height: 'auto'
                    },
                    customClass: ''	//自定义样式
                },
                params: {
                    keyWord: '',
                    catIds: 0,
                    pageNo: 1,
                    pageSize: 40
                },
                items: {
                    loading: true,
                    total : 0,
                    list : []
                },
                cats: [],
                height: 0,
                keyWord: ''
            }
        },
        /*computed: {
            // a computed getter
            config:  {
                get: function () {
                    var rs = {
                        title: '请稍等...',
                        content: '',
                        style: {
                            left: 100,
                            top: 30,
                            width: 150,
                            height: 'auto'
                        },
                        customClass: ''	//自定义样式
                    };
                    $.extend(true,rs, this.temp);
                    return rs;
                }
            }
        },*/
        methods: {
            close(){
                $('.image-select').remove();
                this.$emit("show-coverq",false);
            },
            select_id(s_id,item){
                this.params.catIds = s_id;
                this.queryItems();
            },
            _get_left(){
                this.config.style.width = this.config.style.width.toString() || '68%';

                //百分数方法
                if(this.config.style.width.lastIndexOf('%') != -1){
                    this.config.style.left = ((100 - parseInt(this.config.style.width.substr(0,this.config.style.width.length-1))) / 2) + '%' ;
                }else{
                    this.config.style.left = (($(window).width() - parseInt(this.config.style.width)) / 2);
                }

            },
            cssStyle(){
                return fn.makeStyle(this.config.style);
//                return null;
            },
            customClass(){
                return null;
            },
            itemsHeight(){
                //动态修正高度 600  480  360
                if($(window).height() <=650) {
                    return {height:'360px'};
                }

                if($(window).height() <=750) {
                    return {height:'480px'};
                }

                if($(window).height() > 750) {
                    return {height:'600px'};
                }

            },
            /*//这是个传递给子组件的方法
            onSelect(branch){
                this.params.catIds = branch.value? encodeURI(branch.value):branch.id;
            },*/
            KeyWordSet(keyWord){
                this.params.keyWord = encodeURIComponent(keyWord);
                this.queryItems();
            },
            addPicture(item){
//               console.log(item);
                this.$emit("pic-change",item.picture_path);
            },
            queryItems(){

                var self = this;
                self.items.loading = true;
                //取商品
                $.ajax({
                    type: 'POST',
                    url: CFG.api.top.getImages,
                    dataType: 'json',
                    data: this.params,
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            self.items.list = response.data.pictures ? response.data.pictures.picture : [];
                            self.items.total = response.data.totalResults;
                            self.items.loading = false;
                        }
                    }

                })
            }

        },
        watch: {
            'params.mode': function (newVal, oldVal) {
                this.params.keyWord =  '';
                this.params.catIds = 0;
                this.params.pageNo = 1;
                this.queryItems();
            },
            /*'params.keyWord': function (newVal, oldVal) {
                this.params.pageNo = 1;
                this.queryItems();
            },*/
            'params.catIds': function (newVal, oldVal) {
                this.params.pageNo = 1;
                this.queryItems();
            },
            'params.pageNo': function (newVal, oldVal) {
                this.queryItems();
            }
        },
        created (){
            var self = this;
            //this.$data = _.assignIn(this.$data, this.$props.config);
            //$.extend(true,self.$data, self.temp);

            //取分类
            $.ajax({
                type: 'POST',
                url: CFG.api.top.getImageCats,
                dataType: 'json',
                data: {},
                error: function (error) {
                    //alert(JSON.stringify(error));
                },
                success: function (response) {
                    if (response.err) {
                        //alert(response.err.msg);
                        //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                        //fn.tx(response);
                    } else {
                        self.cats = [{
                            picture_category_id: 0,
                            name: '所有图片',
                            sub_cats: response.data
                        }];
                    }
                }

            })


            //动态修正高度
            if($(window).height() <= 650) {
                this.params.pageSize = 40;
            }

            if($(window).height() <= 750) {
                this.params.pageSize = 40;
            }

            if($(window).height() > 750) {
                this.params.pageSize = 40;
            }

            this.queryItems();
            this.$nextTick(function(){
                $.extend(true,self.$data, self.temp);
                self._get_left();
            })

        },
//        beforeUpdate(){
//            $.extend(true,this.$data, this.temp);
////            this._get_left();
//        },
        components: {
            navTree: navTree,
            pagination: pagination
        }
    }
</script>

<style lang="less">
    .image-select {
        position:fixed;
        top:10px;
        _position:absolute;
        min-height:50px;
        _height:50px;
        opacity: 0.9;
        z-index: 200;
        background-color:#ccc;
        .btn {
            padding: 4px 10px;
        }

        .btn[class*='cancelbtn']{
            background-color: transparent;
        }

        hr {
            margin: 10px 0;
            border: 0;
            border-top: 1px solid #242424;
            border-bottom: 1px solid #404040;
        }

        .hd {
            height:30px;
            line-height: 30px;
            vertical-align: middle;
            padding:0 5px;
            border-bottom: 1px solid #242424;
            border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        }

        .bd {
            display: flex;
            padding:5px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            min-height:30px;
            max-height: 670px !important;

            .active {
                border-color: #C75510;
            }

            .left {
                padding: 5px;
                width:30%;
                height:100%;

                .mode {
                    .input-group {
                        input {
                            height:24px;
                        }
                    }
                }

                .cats {
                    width:100%;
                    height:90%;
                    overflow: auto;
                    padding-top: 20px;

                    .cat,
                    .subcat {

                        span{
                            cursor: pointer;

                            &:hover {
                                background-color: #999;
                            }
                        }

                    }

                }
            }


            .allitems {
                width:80%;
                height:100%;

                .items {
                    height:87%;
                    overflow: auto;

                    .item {
                        display: block;
                        width: 152px;
                        height: 222px;
                        overflow: hidden;
                        text-align: center;
                        margin-right: 5px;
                        float: left;

                        a {
                            width: 150px;
                            height: 150px;
                            overflow: hidden;
                            border: 1px solid #ddd;
                            border-radius: 4px;
                            text-align: center;
                            vertical-align: middle;
                            display: table-cell;
                        }

                        div {
                            white-space:nowrap;
                        }

                    }
                }

            }

        }

        .ft {
            vertical-align: middle;
            padding:2px 5px;
            text-align: center;
            border-top: 1px solid #242424;
            border-top: 1px solid rgba(0, 0, 0, 0.4);
        }
    }

</style>
